<template>
    <el-table :data="filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="title" label="楼盘名称" />
        <el-table-column prop="type" label="房源类型" />
        <el-table-column prop="num" label="门牌号" />
        <el-table-column prop="hometype" label="房源户型" />
        <el-table-column prop="name" label="户主" />
        <el-table-column align="right" v-if="props.isType === 'show'">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
        </el-table-column>
        <el-table-column label="操作" v-if="props.isType != 'show'">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="filterTableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <UpdateTable @get-list="getTableList"></UpdateTable>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, onMounted, nextTick, reactive } from "vue"
import { useStore } from "vuex";
import UpdateTable from './UpdateDialog.vue'
import http from '../util/api'
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useStore()

interface User {
    id: number,
    title: string,
    type: string,
    num: string,
    hometype: string,
    name: string
}

//表格数据
const userList = ref([])


onMounted(() => {
    getTableList()
})

//获取住户信息
const getTableList = () => {
    http('/userlist').then((res) => {
        console.log(res);
        if (res.data.length) {
            ElMessage({
                message: '信息获取成功！',
                type: 'success',
            })
            userList.value = res.data
            // store.commit('addTableData', res.data)
            // console.log(state.userList);

        } else {
            ElMessage({
                message: '信息获取失败！',
                type: 'error',
            })
        }
    })
}

//当前页数
const currentPage = ref(1)
//每页显示个数
const pageSize = ref(10)
//是否使用小型分页样式
const small = ref(true)
//是否禁用分页
const disabled = ref(false)
// 是否为分页按钮添加背景色
const background = ref(false)

//搜索输入框
const search = ref('')

//接收表格类型
const props = defineProps(['isType'])

//处理显示的数据
const filterTableData = computed(() => {
    return userList.value.filter((item: any) => item.name.toLowerCase().includes(search.value.toLowerCase()))
})

//显示个数变化
const handleSizeChange = (val: number) => {
    pageSize.value = val
}

//页码改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}

//编辑信息
const handleEdit = (row: any) => {
    console.log(row)
    store.commit('changeDialog')
    store.commit('showEdit', row)
}

//删除信息
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '确认删除该信息吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http(`/userlist/${row.id}`, 'delete').then(res => {
                if (res.status === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功！',
                    })
                    getTableList()
                } else {
                    ElMessage({
                        type: 'error',
                        message: '删除失败！',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消！',
            })
        })
}


</script>

<style lang="scss" scoped>

</style>